<template lang="pug">
.options-ovvxin(
  :style='{ width: putIt ? "100%" : "auto" }',
  v-if='getOptionsData && getOptionsData.length'
)
  .options-ovvxinclose.hand(
    @click.stop='putIt = !putIt',
    :class='putIt ? "active" : ""'
  )
  //- .animated.infinite.pulse
  .optionsovv-contentwai
    .optionsovv-content(v-scroll.x='')
      //- .options-ovv-close.hand(@click.stop="putIt = !putIt" :style="{'background-color': getBgcolor, 'color': getTextcolor}") {{putIt ? '收起' : '展开'}}
      //- .options-ovv-close.hand(@click.stop="putIt = !putIt" :style="{'background-color': getBgcolor, 'color': getTextcolor}" :class='putIt ? "active": ""')
      .optionsovv-item.ff-cn(
        v-for='(item, index) in getOptionsData',
        :key='index',
        v-show='putIt',
        :style='{ "background-color": getBgcolor }'
      )
        .optionsovv-item-top(@click='showDrawer(item)')
          img.optionsovv-item-top-icon(
            src='static/images/vrtour/xiangshang.png'
          )
          //- van-icon.optionsovv-item-top-icon(name="arrow-up" :color="getTextcolor")
        .optionsovv-item-bottom.flex-1.ff-cn(@click='showGroupOption(item)')
          .optionsovv-item-bottom-left
            img.optionsovv-item-bottom-left-cover(:src='item.full_file_url')
          .optionsovv-item-bottom-right.omit(:style='{ color: getTextcolor }') {{ item.name }}

  OptionContents(ref='OptionContents')
</template>

<script>
import { mapGetters } from 'vuex'
import $ from 'jquery'
export default {
  components: {
    OptionContents: () => import('Comps/Overview/OptionContents'),
  },
  props: {
    position: Object,
  },
  data() {
    return {
      is864: $globalconfig.MODULES.IS_JIAPEI_PROGRAM_OPEN,
      isClick: {},
      flag: true,
      imghh: null,
      putIt: false, // 收起 展开
    }
  },
  computed: {
    ...mapGetters(['ovvData']),
    // 获取背景颜色
    getBgcolor() {
      if (this.ovvData && this.ovvData.background_color) {
        return this.ovvData.background_color
      }
      return '#FFFFFF'
    },
    // 获取文字颜色
    getTextcolor() {
      if (this.ovvData && this.ovvData.text_font_color) {
        return this.ovvData.text_font_color
      }
      return '#000000'
    },
    // 获取选项卡
    getOptionsData() {
      if (this.ovvData && this.ovvData.overview_menu_items) {
        let optionsArr = this.ovvData.overview_menu_items.options
        if (!optionsArr) {
          // 空数据返回
          return []
        }
        console.log(optionsArr)
        return optionsArr
      } else {
        return []
      }
    },
  },
  created() {
    this.vw = document.documentElement.clientWidth
    this.vh = document.documentElement.clientHeight
  },
  watch: {
    ovvData: {
      handler(val) {
        if (val && val.is_open) {
          this.putIt = true
        } else {
          this.putIt = false
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 显示选项卡详情
    showDrawer(item) {
      let pointList = []
      if (
        this.ovvData &&
        this.ovvData.point_list &&
        this.ovvData.point_list.length > 0
      ) {
        pointList = this.ovvData.point_list.filter(
          mat => mat.material_id == item.id
        )
      }
      this.$refs.OptionContents.openDialog({ item, pointList })
    },
    // 显示隐藏地图上option热点
    showGroupOption(item) {
      if (this.ovvData.point_list && this.ovvData.point_list.length > 0) {
        let filArr = this.ovvData.point_list.filter(
          point => point.material_id == item.id
        )
        if (filArr.length <= 0) {
          return this.$vgo.tip('该选项卡未绑定热点')
        }
      }
      setTimeout(() => {
        let itemNodeList = document.querySelectorAll('.ovv-item')
        if (!itemNodeList) return
        let id = item.id
        // console.log(id)
        // console.log(this.isClick)
        if (this.isClick[id]) {
          this.isClick[id] = false
          for (let i in itemNodeList) {
            if (itemNodeList[i].style) {
              itemNodeList[i].style.display = 'block'
            }
          }
        } else {
          // console.log(itemNodeList)
          for (let chi in this.isClick) {
            this.isClick[chi] = false
          }
          this.isClick[id] = true
          if (id == 12) {
            for (let i in itemNodeList) {
              if (i == 15|| i ==18) {
                itemNodeList[i].style.display = 'block'
                console.log(itemNodeList[i].style.display = 'block');
                console.log(itemNodeList[i]);
              } else {
                itemNodeList[i].style.display = 'none'
              }
            }
          }
        }
        for (let i in itemNodeList) {
          // console.log(itemNodeList[i])
          // console.log(itemNodeList[i].className)
          if (
            itemNodeList[i].className &&
            itemNodeList[i].className.indexOf('ovvitem' + id) === -1
          ) {
            itemNodeList[i].style.display = 'none'
          } else {
            // console.log('013333-------------')
            if (itemNodeList[i].style) {
              if (id == 12) {
                return
              }
              itemNodeList[i].style.display = 'block'
            }
          }
        }
      }, 500)
    },
  },
}
</script>

<style lang="stylus" scoped>
.options-ovvxin {
  position: fixed !important;
  bottom: 15px;
  left: 0;
  height: 100px;
  width: 100%;
  z-index: 103;
  display: flex;

  .options-ovvxinclose {
    position: fixed;
    z-index: 2;
    left: calc(50% - 10px);
    bottom: 130px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-image: url('/static/images/vrtour/cover-show.png');

    &.active {
      background-image: url('/static/images/vrtour/cover-hidden.png');
    }
  }

  .optionsovv-content {
    height: 100%;
    display: flex;

    .options-ovv-close {
      background-color: #ddd;
      width: 40px;
      height: 100%;
      box-sizing: border-box;
      background-size: 100% 100%;
      background-image: url('/static/images/vrtour/cover-show.jpg');

      &.active {
        background-image: url('/static/images/vrtour/cover-hidden.jpg');
      }
    }

    .optionsovv-item {
      flex: 0 0 auto;
      box-sizing: border-box;
      padding: 0 5px;
      height: 100%;
      width: 122px;
      margin-left: 10px;
      background-color: #ffffff;
      border-radius: 6px;

      .optionsovv-item-top {
        text-align: center;
        height: 24px;
        box-sizing: border-box;
        padding: 7px 0;

        .optionsovv-item-top-icon {
          // font-size 24px
          height: 10px;
        }
      }

      .optionsovv-item-bottom {
        cursor: pointer;

        .optionsovv-item-bottom-left {
          width: 100%;
          height: 50px;
          border-radius: 6px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .optionsovv-item-bottom-right {
          width: 100%;
          font-size: 14px;
          text-align: center;
          line-height: 25px;
        }
      }
    }
  }
}
</style>